<template>
	<view>
		<!-- 搜索框 -->
		<view class="search-bar">
			<view class="search-bar-box">
				<image class="search-span" src="/static/search.png"></image>
				<input type="text" value="" placeholder="请输入搜索内容" class="search-text" maxlength="10" focus />
			</view>
			<button class="search-btn">搜索</button>
			<navigator class="map" url="/pages/refuelNearby/navigateNow/navigateNow">
				<button class="mapsearh">地图模式</button>
			</navigator>
		</view>

		<view class="out">
<!-- 			<view class="select">
				<uni-data-select v-model="selectedFuel" :localdata="range" @change="filterStations"></uni-data-select>
			</view> -->

			<!-- Display filtered fuel stations -->
			<view v-for="item in gasStations" :key="item.id" class="info">
				<navigator url="/pages/refuelNearby/refuelDetails/refuelDetails" class="aaa">
					<view class="picture">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="neirong">
						<text>{{ item.name }}</text>
						<view class="price">
							<text>{{ item.price }}/升</text>
							<text>{{ item.discount }}</text>
						</view>
						<view class="local">
							<text>{{ item.pname }}{{ item.cityname }}{{ item.adname }}{{ item.address }}</text>
						</view>
					</view>
				</navigator>
				<view class="right">
					<text>{{ item.distance }}m</text>
					<navigator url="/pages/refuelNearby/navigateNow/navigateNow">
						<image src="../../static/daohang.png" mode=""></image>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				selectedFuel: 0, // Default to 92#
				range: [{
						value: 0,
						text: "92#"
					},
					{
						value: 1,
						text: "95#"
					},
					{
						value: 2,
						text: "98#"
					},
					{
						value: 3,
						text: "0#"
					}
				],
				stations: [{
						id: 1,
						name: "中国石油加油站",
						price: "5.97",
						discount: "满200减20",
						address: "山阳区人民中路32号",
						distance: 44,
						image: "../../static/istockphoto-519170655-1024x1024.png",
						fuelType: 0 // 0 represents 92#
					},
					{
						id: 2,
						name: "中国石化加油站",
						price: "6.20",
						discount: "满300减30",
						address: "东城区长安街45号",
						distance: 120,
						image: "../../static/istockphoto-519170655-1024x1024.png",
						fuelType: 1 // 1 represents 95#
					},
					{
						id: 3,
						name: "壳牌加油站",
						price: "6.50",
						discount: "满500减50",
						address: "西城区建国路11号",
						distance: 200,
						image: "../../static/istockphoto-519170655-1024x1024.png",
						fuelType: 2 // 2 represents 98#
					},
					{
						id: 4,
						name: "中国石油柴油站",
						price: "5.50",
						discount: "满100减10",
						address: "南城区丰台路12号",
						distance: 90,
						image: "../../static/istockphoto-519170655-1024x1024.png",
						fuelType: 3 // 3 represents 0# (diesel)
					}
				],
				filteredStations: [],
				gasStations:[]
			};
		},
		methods: {
			// Filter stations based on the selected fuel type
			filterStations() {
				this.filteredStations = this.stations.filter(station => station.fuelType === this.selectedFuel);
			}
		},
		created() {
			this.filterStations();
		},
		onLoad() {
			uni.request({
				url: 'https://api.map.baidu.com/location/ip?coor=bd09ll&ak=eVtgZ8GCivcQG5JpdFc3Akhd5M4k6fr6',
				success: (resp) => {
					uni.request({
						url: 'https://restapi.amap.com/v5/place/around?key=0d9c14c6338557662a4b451fd4cafd8a&keywords=加油站&radius=10000&location=' +
							`${resp.data.content.point.x}` + ',' + `${resp.data.content.point.y}`,
						success: (res) => {
							this.gasStations=res.data.pois
							console.log(this.gasStations);
						}
					})
				}
			})

		}
	};
</script>

<style>
	// 搜索框
	.search-bar {
		width: 100%;
		height: 100rpx;
		margin-top: 2%;
		display: flex;

	}

	.search-bar-box {
		display: flex;
		margin: 0 auto;
		width: 620rpx;
		height: 60rpx;
		border: 5rpx solid #white;
		border-radius: 20rpx;
		background-color: white;
	}

	.search-span {
		width: 50rpx;
		height: 30rpx;
		margin-top: 16rpx;
		margin-left: 30rpx;
	}

	.search-text {
		width: 100%;
		margin-top: 10rpx;
		margin-left: 20rpx;
		font-size: 30rpx;
		color: blue;
	}

	.search-btn {
		background-color: blue;
		/* Green */
		color: white;
		text-align: center;
		display: inline-block;
		font-size: 28rpx;
		width: 140rpx;
		height: 65rpx;
		line-height: 65rpx;
		/* border-radius: 30rpx; */
		letter-spacing: 3rpx;
	}

	.map {
		width: 245rpx;
		height: 20rpx;
		margin-top: -3rpx;
	}

	.mapsearh {
		font-size: 27rpx;
	}

	.out {
		background-color: white;
		margin-top: -28rpx;
	}

	.select {
		/* width: 130rpx;
	height: 64rpx; */
		left: 23px;
		top: 118px;
		padding-top: 30rpx;
		margin-left: 40rpx;
		width: 65px;
		height: 32px;
		line-height: 20px;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: Microsoft Yahei;
	}

	.info {
		display: flex;
		margin: 30rpx;
		margin-left: 50rpx;
		border-bottom: 5rpx solid #EFEFF5;



	}

	.aaa {
		display: flex;
	}

	.neirong {
		width: 350rpx;
		margin-bottom: 10rpx;

	}

	.neirong>text:nth-child(1) {
		font-size: 32rpx;
		font-weight: bold;

	}

	.price {
		margin-top: 10rpx;
		margin-bottom: 5rpx;
	}

	.price>text:nth-child(1) {
		font-size: 14px;
		color: red;
		margin-right: 10rpx;
		font-weight: bold;
	}

	.price>text:nth-child(2) {
		left: 199px;
		top: 286px;
		width: 58px;
		height: 21px;
		line-height: 17px;
		border-radius: 3px;
		background-color: rgba(255, 37, 37, 0.07);
		color: rgba(255, 37, 37, 1);
		font-size: 12px;
		text-align: center;
		font-family: Roboto;
	}

	.local {

		color: rgba(108, 108, 108, 1);
		font-size: 14px;

	}

	.picture>image {
		margin-right: 15rpx;
		width: 100px;
		height: 66px;
		background-color: rgba(229, 229, 229, 1);
	}

	.right {
		padding-left: 0rpx;

	}

	.right>text {
		padding-left: 0rpx;
	}

	.right>navigator>image {
		width: 50rpx;
		height: 42rpx;

		margin-top: 50rpx;
	}
</style>